csslint 语法建议规则

文章为csslint中文版译文，点击原文可查看英文版，如遇到翻译错误或错别字啥的，请留言指出~
规则列表如下

adjoining-classes
box-model
box-sizing
bulletproof-font-face
compatible-vendor-prefixes
empty-rules
display-property-grouping
duplicate-background-images
duplicate-properties
fallback-colors
floats
font-faces
font-sizes
gradients
ids
import
important
known-properties
outline-none
overqualified-elements
qualified-headings
regex-selectors
shorthand
star-property-hack
text-indent
underscore-property-hack
unique-headings
universal-selector
unqualified-attributes
vendor-prefix
zero-units

adjoining-classes

不允许使用相邻类 Disallow adjoining classes

像.foo.bar这样的相邻类，也可以称之为类链。在CSS规范中允许使用，但在IE6即更早版本中可能就不好使了。IE仅会命中.bar选择器，也就是说你的选择器不会按你的套路出牌，埋下游览器样式兼容性问题的种子。(不用IE6的放心大胆的使用吧)

通常来说，基于单类来定义一个样式要比多类定义更好。可以瞅瞅想想下面的例子：

.foo {
    font-weight: bold;
}
.bar {
    padding: 10px;
}
.foo.bar {
    color: red;
}

选择器.foo.bar的规则，可以用一个新类进行重写:

.foo {
    font-weight: bold;
}
.bar {
    padding: 10px;
}
.baz {
    color: red;
}

那么这个新类 baz 必须添加至原有的HTML元素上。这样更利于维护，因为.baz 规则，此刻就可以被复用了，而.foo.bar规则只能被用在前一种固有的情况下。

规则说明与示例

规则 ID: adjoining-classes

此规则意在指出使用相邻类时，在IE6即更早版本时会出现匹配失败的情况。

以下例子将会出现警告:

.foo.bar {
    border: 1px solid black;
}
.first .abc.def {
    color: red;
}

以下例子将不会出现警告:

/* 两个类中间有空格 */
.foo .bar {
    border: 1px solid black;
}

box-model

注意盒子模型 Beware of box model size

盒子模型是CSS当中最常误解的内容之一。"盒子模型 (Box model)"会参考一系列盒子属性来最终确定元素的显示。盒子的最里层为内容。内容被内边距包裹，内边距之外再由边框包裹。盒子最终的宽高也就由以上的属性相互影响，是不是有些小困惑。来，看下面的例子：

.mybox {
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

新手可能会觉得拥有mybox类的元素宽度为100像素。但实际上呢，宽度是112像素，这是因为盒子模型默认为内容盒子，宽度最终由内容、内边距、边框相加而得。如果开发人员不清楚盒子模型，那对此例子的宽度就会不一致。

通过将box-sizing属性值设置为border-box,可以使绝大多数游览器遵循宽高是元素本身的全尺寸，例子如下:

.mybox {
    box-sizing: border-box;
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

现在，这个拥有mybox类的元素，实际宽度就为100像素了,内边距与边框将占据其中的空间，剩下的88像素将是内容的宽度。

规则说明与示例

规则 ID: box-model

此规则意在消除潜在的盒子模型大小问题。因此，规则将在以下情况出现警告:

1.width被与border,border-left,border-right,padding,padding-left,padding-right属性同时使用时

2.height被与border,border-top,border-bottom,padding,padding-top,padding-bottom属性同时使用时

如果box-sizing属性已指定，则假定你已非常清楚盒子模型的规则,以上的情况，此规则将不会出现警告。

以下的例子将会出现警告:

/* width and border */
.mybox {
    border: 1px solid black;
    width: 100px;
}

/* height and padding */
.mybox {
    height: 100px;
    padding: 10px;
}

以下的例子将不会出现警告:

/* width and border with box-sizing */
.mybox {
    box-sizing: border-box;
    border: 1px solid black;
    width: 100px;
}

/* width and border-top */
.mybox {
    border-top: 1px solid black;
    width: 100px;
}

/* height and border-top of none */
.mybox {
    border-top: none;
    height: 100px;
}

box-sizing

不允许使用盒子大小 Disallow box sizing

CSS的box-sizing属性用来定义边框，内边距，是如何相互影响宽度和高度的。此属性默认值为content-box，意思是宽和高是由元素内容本身决定，然后内边距与边框再将内容包裹上。请看以下例子:

.mybox {
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

这个盒子的实际宽度为112像素。这是因为内容将占据100像素的宽度，然后内容两侧分别加上5像素的内边距，接着两侧再加上1像素的边框。

当你将box-sizing的属性值改变至border-box时，计算方式则不同了:

.mybox {
    box-sizing: border-box;
    border: 1px solid black;
    padding: 5px;
    width: 100px;
}

此盒子的实际宽度为100像素而其中供内容的可用空间为88像素(100-5px[左]内边距-5px[右]内边距-1px[左]边框-1px[右]边框)。大多数情况下认为border-box的设置更加合乎逻辑，也更像宽高属性表达的含义。

但是呢但是呢,在使用box-sizing时会有个小小的问题,也就是IE6 IE7是不支持box-sizing这个属性的。因此会展示出不同于盒子模型设置属性的效果。

规则说明与示例

规则 ID: box-sizing

此规则在box-sizing属性使用时会出现警告。其含义即提示开发者此属性在IE6 IE7或更早期的游览器上得不到支持。

以下示例将会出现警告:

.mybox {
    box-sizing: border-box;
}

.mybox {
    box-sizing: content-box;
}

bulletproof-font-face

预防字体引用错误 Bulletproof font face

当使用@font-face来跨游览器声明多字体类型时，你会发现在老版IE中出现404错误，这是因为老版IE在解析字体声明时的缺陷(BUG)。来~ 举个例子:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot') format('embedded-opentype'), 
        url('myfont-webfont.woff') format('woff'), 
        url('myfont-webfont.ttf')  format('truetype'),
        url('myfont-webfont.svg#svgFontName') format('svg');
}

在IE6，7和8上将会出现404错误。解决办法是在第一个字体链接后加上 ? (问号)，接下来 IE 会把余下的属性值看作查询字符串。以下为正确示例:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
        url('myfont-webfont.woff') format('woff'), 
        url('myfont-webfont.ttf')  format('truetype'),
        url('myfont-webfont.svg#svgFontName') format('svg');
}

规则说明与示例

规则 ID: bulletproof-font-face

此规则意在防止在IE8及早期游览器上因为解析字体链接的BUG而产生的404错误。

以下示例会出现警告:

@font-face {
    font-family: 'MyFontFamily';

    /* First web font is missing query string */
    src: url('myfont-webfont.eot') format('embedded-opentype'), 
        url('myfont-webfont.woff') format('woff'), 
        url('myfont-webfont.ttf')  format('truetype'),
        url('myfont-webfont.svg#svgFontName') format('svg');
}

以下示例将不会出现警告:

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
        url('myfont-webfont.woff') format('woff'), 
        url('myfont-webfont.ttf')  format('truetype'),
        url('myfont-webfont.svg#svgFontName') format('svg');
}

此规则要求第一个字体声明为带查询字符串的 .eot文件，但不会检测余下的字体链接(假定你已有了.eot文件，这就无所谓了)

compatible-vendor-prefixes

使用游览器前缀 Require compatible vendor prefixes

实验性的CSS属性，通常需要添加游览器前缀，方能实现其效果。当然，等到标准的最终统一与建立就不需要再添加前缀了。许多CSS3属性对应都有多种前缀，包括 Firefox(-moz)，Safari/Chrome(-webkit)，Opera(-o)，和 Internet Explorer(-ms)。因为前缀过多，我们在使用新属性时就很容易忘记添加游览器前缀。

以下属性建议追加多内核前缀:

animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
appearance
border-end
border-end-color
border-end-style
border-end-width
border-image
border-radius
border-start
border-start-color
border-start-style
border-start-width
box-align
box-direction
box-flex
box-lines
box-ordinal-group
box-orient
box-pack
box-sizing
box-shadow
column-count
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-width
hyphens
line-break
margin-end
margin-start
marquee-speed
marquee-style
padding-end
padding-start
tab-size
text-size-adjust
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
user-modify
user-select
word-break
writing-mode

如果想让你的CSS效果跨游览器支持，那么给新CSS属性增加对应的游览器前缀就非常重要了。

规则说明与示例

规则 ID: compatible-vendor-prefixes

此规则将在缺失游览器前缀的属性时出现警告。支持的属性已在上方列表中罗列。

以下示例将会出现警告:

/* Missing -moz, -ms, and -o */
.mybox {
    -webkit-transform: translate(50px, 100px);
}

/* Missing -webkit */
.mybox {
    -moz-border-radius: 5px;
}

empty-rules

不允许空规则 Disallow empty rules

空规则即不包含任意属性(没有定义样式属性) ，如下:

.foo {
}

许多时候呢，空规则的出现是因为重构了样式而忘记删除冗余代码造成的。消除空规则缩小了样式文件大小与精简了待游览器处理的样式信息。

规则说明与示例

规则 ID: empty-rules

此规则在CSS样式中发现为空规则时出现警告。以下示例将会出现警告:

.mybox { }

.mybox {

}

.mybox { /* a comment */ }

.mybox {
    /* a comment */
}

display-property-grouping

给display设置匹配的组合属性 Require properties appropriate for display

尽管你可以在CSS中定义任意的组合规则，但是呢，其中有些规则会因为元素设置了display属性，而忽略你所设置的规则。这会导致你的CSS文件中出现脏代码，同时也误解了规则理应如何运转的。

当 display:inline时, width,height,margin-top,margin-bottom,和float属性的设置将不会起到作用，因为内联(inline)元素不是一个规则的盒子模型，也就无从设置这些属性。而 margin-left和margin-right依旧能起效是为了保证缩进的目的，其它的外边距(margin) 设置则起不到效果。float属性有时会用作修复 IE6 double-margin bug.

其它基于display的情形有:

display:inline-block 不应与 float 同时使用。
display:block 不应与 vertical-align 同时使用。
display:table-* 不应与 margin' 或 float` 同时使用。

移除这些会被忽略或有问题的属性，能减小文件体积从而改善性能。

规则说明与示例

规则 ID: display-property-grouping

此规则将标识出与display属性同时使用而不起效的属性。其目的是使CSS文件更精简，更清晰而无多余代码。因此，检测出以下代码时，提示警告:

display:inline 与 width,height,margin,margin-top,margin-bottom,float 。
display:inline-block 与 float 同时使用。
display:block 与 vertical-align 同时使用。
display:table-* 与 margin' 或 float` 同时使用。

以下示例将提示警告:

/* inline with height */
.mybox {
    display: inline;
    height: 25px;
}

/* inline-block with float */
.mybox {
    display: inline-block;
    float: left;
}

/* table-cell and margin */
.mybox {
    display: table-cell;
    margin: 10px;
}

以下示例将不会提示警告:

/* inline with margin-left */
.mybox {
    display: inline;
    margin-left: 10px;
}

/* table and margin */
.mybox {
    display: table;
    margin-bottom: 10px;
}

duplicate-background-images

不允许重复背景图片 Disallow duplicate background images

尽可能的使用较少的代码来完成功能，是高性能的准则之一。因此，同个URLS链接地址在CSS中只出现一次最好。如果你有多个样式类需要使用同一背景图片，那么最好声明一个包含此图片地址的通用样式类，接着添加至需要使用的元素之上。请看下面代码:

.heart-icon {
    background: url(sprite.png) -16px 0 no-repeat;
}

.task-icon {
    background: url(sprite.png) -32px 0 no-repeat;
}

在两个类中重复定义了背景图片地址。这是你本不需要的冗余代码，同时呢，当你修改了图片文件名，也增加了忘记同时修改文件中两处图片地址的可能性。一种解决方式为，抽取一个图片地址类(作为复用类)，然后将此类添加至原有HTML元素上。如下:

.icons {
    background: url(sprite.png) no-repeat;
}

.heart-icon {
    background-position: -16px 0;
}

.task-icon {
    background-position: -32px 0;
}

这里,icons类指明了背景图片，其它类则指明背景图片的位置。

规则说明与示例

规则 ID: duplicate-background-images

此规则意在确保同一链接地址不会在样式层叠表中重复。

以下示例将会提示警告:

/* multiple instances of the same URL */
.heart-icon {
    background: url(sprite.png) -16px 0 no-repeat;
}

.task-icon {
    background: url(sprite.png) -32px 0 no-repeat;
}

以下示例将不会提示警告:

/* single instance of URL */
.icons {
    background: url(sprite.png) no-repeat;
}

.heart-icon {
    background-position: -16px 0;
}

.task-icon {
    background-position: -32px 0;
}

duplicate-properties

不允许重复属性 Disallow duplicate properties

在早先网页开发中，相同的CSS属性出现了两次则毫无疑问是有问题的，特别是如果有两个不同的值，如下:

.mybox {
    width: 100px;
    width: 120px;
}

任何人看到此处的代码都清楚的知道是错误的。但是最近呢，复用属性可以用来解决高低版游览器对CSS属性的支持度情况。举个例子，部分游览器支持RGBA色彩，而其它的则不行，那么出现以下的示例，就十分正常合理了:

.mybox {
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
}

此处重复很明显是有意为之。开发者想在支持RGBA的游览器上使用其效果，而不支持的游览器则使用传统的纯色。

规则说明与示例

规则 ID: duplicate-properties

此规则意在找出重复定义的CSS属性代码。警告将出现在:

属性出现两次且为相同的值。
属性出现两次且被至少一个其它的属性所隔开。

以下示例将会提示警告:

/* properties with the same value */
.mybox {
    border: 1px solid black;
    border: 1px solid black;
}

/* properties separated by another property */
.mybox {
    border: 1px solid black;
    color: green;
    border: 1px solid red;
}

以下示例将不会提示警告:

/* one after another with different values */
.mybox {
    border: 1px solid black;
    border: 1px solid red;
}

fallback-colors

要求备用色彩 Require fallback colors

刚开始时，有三种方式来指定颜色：使用16进制,、使用3或6位字符串、使用颜色名称如 red 或 rgb()。但在CSS3中，新增了几种颜色定义的形式，包括 rgba(),hsl(),hsla()。这些新的颜色格式显著提升了开发者使用色彩的灵活可塑性，同时使得那些老版游览器看上去更糟了。

这个规则源于游览器的CSS解析器会略过不识别的名称或值。像IE8或更早的这类老版游览器，不识别 rgba(),hsl(),hsla(),其结果就是会忽略定义的属性。请看如下代码:

.box {
    background: #000;
    color: rgba(100, 100, 200, 0.5);
}

支持此格式的游览器将正常解析此CSS代码。但不支持的游览器，因不能解析rgba的值而完全忽略此color的属性。也就意味着color的实际值将继承至上下文环境，也可能最终值为黑色(与背景色一致)。为防止此情况，就需要使用十六进制颜色值、颜色名称或rga()格式来设定一个备用色彩，如下:

.box {
    background: #000;
    color: blue;
    color: rgba(100, 100, 200, 0.5);
}

备用色彩须要在新颜色格式的前方定义，以确保老版游览器能正常解析并使用，新版游览器也能继续执行新的颜色格式。

规则说明与示例

规则 ID: fallback-colors

此规则意在确保在所有的游览器上都能显示合适的颜色。为此，将在如下情形提示警告:

color属性使用rgba(),hsl(),hsla()颜色值时,在前处未使用针对老版游览器的color颜色格式。
background属性使用rgba(),hsl(),hsla()颜色值时,在前处未使用针对老版游览器的background颜色格式。
background-color属性使用rgba(),hsl(),hsla()颜色值时,在前处未使用针对老版游览器的background-color颜色格式。

以下示例将会提示警告:

/* missing fallback color */
.mybox {
    color: rgba(100, 200, 100, 0.5);
}

/* missing fallback color */
.mybox {
    background-color: hsla(100, 50%, 100%, 0.5);
}

/* missing fallback color */
.mybox {
    background: hsla(100, 50%, 100%, 0.5) url(foo.png);
}

/* fallback color should be before */
.mybox {
    background-color: hsl(100, 50%, 100%);
    background-color: green;
}

以下示例将不会提示警告:

/* fallback color before newer format */
.mybox {
    color: red;
    color: rgba(255, 0, 0, 0.5);
}

floats

不允许过多的浮动 Disallow too many floats

float属性是CSS中实现多列布局广受欢迎的方式。在项目中，越来越多的float元素被用来创建不同的页面布局或站点布局。如果此时改变布局，则会使得CSS代码十分脆弱，难以维护。

通常，使用很多的float意味你的项目将得益于网格系统。CSS网格系统使用CSS类来实现标准的多列布局，一些热门的网格系统有:

960gs
Blueprint
OOCSS Grids
YUI Grids
[Twitter Bootstrap] (http://getbootstrap.com)

使用以上其中一种网格系统，将极大的减少你需要编写的CSS代码。

规则说明与示例

规则 ID: floats

此规则意在监察使用float次数从而减少代码复杂度。当float出现超过10次时，将提示警告。使用float频率超过10次，意味着代码中有许多多列布局的定义，那么通过引用网格系统框架，将更利于你的代码维护。

font-faces

不使用过多网络字体 Don't use too many web fonts

网络字体越来越流行，@font-face使用频率也随之增加。但是，当字体文件过大，以及部分游览器在下载字体文件时,会阻塞渲染，就带来了显示性能的隐患。出于这个原因，CSSlint将在样式表中监测出现超过 5次网络字体引用时，提示警告。

font-sizes

不使用过多的字体大小声明 Don't use too many font size declarations

一个利于维护的站点，通常都有通用的字体集。这些字体大小，往往定义在一个代表其含义的抽象类当中，以便运用到站点的各个使用场景。如果未抽取出公用类，会导致开发者频繁的使用font-size,来使元素大小按预期显示。这就带来了一个问题，当设计的字体大小改变后，我们需要改变样式中所有设计的字体大小。而抽取出类时，只用改变类中定义的大小即可做到全局调整。

你可以创建一些标准字体大小类，如:

.small {
    font-size: 8px;
}

.medium {
    font-size: 11px;
}

.large {
    font-size: 14px;
}

在你的项目中使用以上类，能确保字体大小始终保持一致性，也限制了font-size在CSS文件中出现的次数。此时，只需要改变一处字体大小的设置，就可实现之前需要修改多处的效果。

规则说明与示例

规则 ID:font-sizes

此规则意在强调把过多字体大小的定义，转而至统一定义为一个类的好处。规则在使用 font-size 超过10次时提示警告。

gradients

要求定义所有渐变前缀 Require all gradient definitions

截止2011年12月份，CSS渐变的标准定义还未定稿，也就是说想跨游览器实现色彩渐变，需要使用很多不同的游览器前缀。到现在为止，CSS渐变有五种不同的游览器前缀。

-ms-linear-gradient and -ms-radial-gradient for Internet Explorer 10+
-moz-linear-gradient and -moz-radial-gradient for Firefox 3.6+
-o-linear-gradient and -o-radial-gradient for Opera 11.10+
-webkit-linear-gradient and -webkit-radial-gradient for Safari 5+ and Chrome
-webkit-gradient for Safari 4+ and Chrome (aka "Old WebKit")

想跨游览器实现一个简单的双色渐变，须要代码如下:

background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* IE10+ */

在如此多的前缀里，编码中很容易忘记少编写其中的一种或多个渐变前缀。

规则说明与示例

规则 ID: gradients

此规则在使用渐变时只定义部分游览器前缀而未定义所有游览器前缀时，提示警告。

以下示例将提示警告:

/* Missing -moz, -ms, and -o */
.mybox {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
}

/* Missing old and new -webkit */
.mybox {
    background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); 
    background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
}

以下示例不会提示警告:

.mybox {
    background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); 
}

ids

不允许 ID 选择器 Disallow IDs in selectors

一直以来，开发者对 ID选择器感情甚好、情有独钟。但是呢，ID选择器也多多少少有些副作用：它完全是唯一的，因此不能复用。你可在页面中，对所有元素都使用ID选择器，但因此，你会失去CSS其它方面带来的诸多益处。

CSS的好处之一就是可在多处复用样式规则。当你开始使用ID选择器时，就不经意间将样式局限在了单个元素上。假设你的代码如下:

#header a {
    color: black;
}

这个样式只会在ID为header 下的a标签起效。但假设现在，你想在页面中的另外一个章节也使用同样的样式，估计你只能重新再定义一个类来实现效果，如下:

#header a,
.callout a {
    color: black;
}

一旦你明白此处的含义，你怕是只会使用类定义而不会声明ID选择器了。

.callout a {
    color: black;
}

最终，你可能将不在需要，也不想再使用ID选择器，而使用类选择器取代其效果。弃用ID选择器后，你将解锁释放CSS复用的最大能力。

规则说明与示例

规则 ID: ids

此规则意在提示不使用ID选择器从而提高代码复用和可维护性。任何一处的ID选择器将提示警告。

以下示例将提示警告:

#mybox {
    display: block;
}

.mybox #go {
    color: red;
}

import

不允许使用@import Disallow @import

@import命令用于在CSS文件中引用其它的CSS文件，例子如下:

@import url(more.css);
@import url(andmore.css);

a {
    color: black;
}

此代码在开始位置引用了另外两个样式表。当游览器解析此代码时，会在每个@import后开始下载指定的文件，而停止执行后面的代码。也就是说在@import指定的文件未下载完成前，游览器不会同时下载其它的样式文件，总而失去了并行下载CSS的优势。

有两种替代@import的方式:

使用构建工具，在部署前，就将需要合并的CSS文件串联至一起。
使用多个<link>标签来引入你需要的CSS样式。<link>引入是支持并行下载的。

规则说明与示例

规则 ID: import

此规则在使用@import时提示警告。

以下示例将提示警告:

@import url(foo.css);

important

不允许使用 !important Disallow !important

!important注释使用在人为指定强调的属性上。这往往意味着这个待强调的特殊属性已在整个CSS文件中失控(选择器不能正常工作),亦或需要重构代码了。!important在CSS中出现的次数越多，越突显出开发者在页面样式上的不少问题。

规则说明与示例

规则 ID: important

此规则意在确保代码的特指度工作正常。为此,一旦出现 !important 将提示警告。

以下示例将提示警告:

.mybox {
    color: red !important;
}

known-properties

要求使用已知属性 Require use of known properties

可供CSS使用的属性变得越来越多，那么在不检测属性名称是否正确时，我们就很容易将其拼写错误。

规则说明与示例

规则 ID: known-properties

此规则将检查每个使用的属性名称以确保其是已知的属性。支持检查的属性是CSS解析器中的一部分，规则使用CSS解析器的信息来验证属性是否为已知。支持检查的属性将随CSS的开发完善而需要更新，虽然现在不是最终版，但毕竟是个避免错误的好的开始。此规则就是在出现拼写错误时提示警告。

所有游览器前缀属性 (以 - 开始) 将被忽略，因为前缀会添加至游览器各自版本的属性上，而这些属性没有一个参考标准。此规则将不同于传统的CSS验证，传统的CSS验证在游览器前缀属性出现时也会提示警告。

此规则不仅会检查属性名称，也会检查属性对应的值是否与其匹配。但现在，只能检查大部分而不是所有的属性对应的值的合法性。

以下示例将提示警告:

/* clr isn't a known property */
a {
    clr: red;
}

/* 'foo' isn't a valid color */
a {
    color: foo;
}

以下示例将不提示警告:

/* -moz- is a vendor prefix, so ignore */
a {
    -moz-foo: bar;
}

outline-none

不允许 outline:none Disallow outline:none

outline属性用于在元素的四周定义边框。不同于border属性,outline不会改变元素的大小与布局。正因如此，游览器常用outline来突出激活状态的元素。当元素被选中为焦点时，在IE和火狐(Firefox)游览器中，outline所渲染的元素是单像素的点状线条。

焦点轮廓，能直观的提醒用户当前页面获得焦点的元素，因此在辅助提示上的重要性不言而喻。对于纯键盘用户而言，如果当前焦点元素没有明显的视效指明，就几乎不可能追踪到页面中所选的元素。不幸的是，默认样式下的焦点轮廓，颜值有些低，不美观，以至在代码中将其移除了,如下:

a {
    outline: none;
}

或

a {
    outline: 0;
}

以上两种方式都将移除元素的外轮廓，即便在元素获得焦点时，外轮廓也不会出现。这对于辅助提示是不友好的。

当然，你可以给用户提供自定义焦点效果，从而替换默认的点状边框。为此，移除掉outline,添加对应的改善效果，就很人性化很合理了。那么,好的解决方式之一就是使用 :focus 来提供新的样式的同时，重设outline,例子如下:

a:focus {
    border: 1px solid red;
    outline: none;
}

规则说明与示例

规则 ID: outline-none

此规则意在确保纯键盘用户获得焦点提示。为此,规则发现以下情况提示警告:

outline: none 或 outline: 0 在选择器中使用,但未指定 :focus
outline: none 或 outline: 0 在选择器中使用,虽指定:focus但其未定义替换属性

以下示例将提示警告:

/* no :focus */
a {
    outline: none;
}

/* no :focus */
a {
    outline: 0;
}

/* :focus but missing a replacement treatment */
a:focus {
    outline: 0;
}

以下示例不会提示警告:

/* :focus with outline: 0 and provides replacement treatment */
a:focus {
    border: 1px solid red;
    outline: 0;
}

overqualified-elements

不允许过度定义选择器 Disallow overqualified elements

编写如li.active选择器是不必要的，除非不同的元素名称，在使用相同类名下需要展示不同的样式。多数情况下，在选择器中移除元素名称更为妥当，不仅减小了CSS文件的体积，同时也提升了选择器的性能(不须再次匹配元素)。

移除元素名称也同时降低了CSS与HTML的耦合度，允许你改变元素使用的样式类，而不需要更新CSS样式文件。

规则说明与示例

规则 ID: overqualified-elements

此规则意在移除冗余不必的选择器总而减少数据大小。为此，警告出现在元素名称与类名同时使用时(如 li.active)。如果，两个不同的元素使用了相同的类名(如 li.active p.active) 将不会提示警告。

以下示例提示警告:

div.mybox {
    color: red;   
}

.mybox li.active {
    background: red;
}

以下示例将不提示警告:

/* Two different elements in different rules with the same class */
li.active {
    color: red;
}

p.active {
    color: green;
}

qualified-headings

不允许定义标题 Disallow qualified headings

标题元素(h1-h6) 应定义为顶级样式且不能在页面其它区域定义其特定样式。标题样式应以面向对象的思维来考虑设计，并且在整个站点中的展示效果应当保持一直。这种方式允许在站点中复用你的样式从而利于站点的统一展示，健壮代码与维护。举个例子，以下代码为过度定义标题:

.foo h1 {
    font-size: 110%;
}

规则说明与示例

规则 ID: qualified-headings

此规则意在找出定义了标题的规则，因此警告将出现在样式规则里将标题元素作为最后一个选择器。

以下示例提示警告:

/* qualified heading */
.box h3 {
    font-weight: normal;
}

/* qualified heading */
.item:hover h3 {
    font-weight: bold;
}

以下示例不提示警告:

/* Not qualified */
h3 {
    font-weight: normal;
}

regex-selectors

不允许选择器类似与表达式 Disallow selectors that look like regular expressions

CSS3增加了复杂的属性选择器使得我们可以根据表达式来匹配属性值。这系列的选择器有着性能的影响，表达式匹配与简单的类名匹配相比速度要慢。在诸多场景里，是使用一个不确定值的选择器还是简单的给元素增加一个类名选择器还在讨论中。这里有几种需要注意的属性选择器。

如属性选择器仅包含属性本身，则此属性选择器实际上没有性能问题。举个例子，以下选择器仅匹配 <a>元素定义了href属性:

//OK
a[href] {
    color: red;
}

此属性选择器能正常使用并且也不会造成任何性能问题。

如属性选择器使用确定的值作为匹配条件，则此属性选择器也是没问题的。举个例子,以下选择器仅匹配<a>元素的rel属性值为 "external" :

//OK
a[rel=external] {
    color: blue;
}

除以上两种情况，其它条件下使用属性选择器会造成性能问题。各属性选择器都有着类似的基本格式，在元素名称后使用方括号，与等号组合成的标识符，来进行表达式匹配。

包含

第一类"问题"选择器是包涵选择器。选择器使用 *=来匹配属性值中包涵给定的字符串元素。工作原理类似与JavaScript中indexOf()方法,只要检索的值出现在属性值的任意位置即可,例子如下:

a[href*=yahoo.com] {
    color: green;
}

此选择器匹配任何<a>元素的href属性值中有字符串 "yahoo.com"的条件。如下示例将匹配此条件:

<a href="http://www.yahoo.com/">Yahoo!</a>

<a href="http://www.google.com/redirect=www.yahoo.com">Redirect to Yahoo!</a>

<a href="http://login.yahoo.com/">Login to Yahoo!</a>

注意不必担心字符串两边是否有空格,因为只做部分匹配。

开始为

接着需要"避免使用"的选择器是开始为匹配。选择器使用^=操作符来匹配属性值以给定的字符串开头元素。例子如下:

a[rel^=ext] {
    color: red;
}

此规则将匹配如下示例:

<a href="http://www.example.com" rel="external">Example</a>

<a rel="extra">Extra! Extra!</a>

<a rel="extreme">Extreme</a>

所有的选择器只关注字符串"ext"是否在rel属性值的起始位置。

结尾为

接着需要"避免使用"的选择器是结尾为匹配。选择器使用$=操作符来匹配属性值以给定的字符串结尾元素。例子如下:

a[href$=.html] {
    color: blue;
}

此规则匹配所有 <a>元素以其href属性值为.html结尾的条件。以下示例将匹配:

<a href="index.html">Home</a>

<a href="http://www.example.com/example.html">Example</a>

单词匹配

检查被空格间隔开的属性值,是更为复杂的选择器。选择器使用 ~=操作符来匹配属性值必须包涵给定的单词,换句话说,属性值匹配给定单词的同时,属性值本身还须被空格所间隔开。示例如下:

a[rel~=external] {
    color: red;
}

此规则将匹配如下例子:

<a href="http://www.example.com" rel="external">Example</a>

<a href="http://www.example.com" rel="external me">Example</a>

<a href="http://www.example.com" rel="reference external">Example</a>

<a href="http://www.example.com" rel="friend external me">Example</a>

包涵破折号

最后一个"问题"选择器是检查属性值中的字符串中是否被破折号分隔。|=用来找字符串的内部是否有xxx-yyy-zzz格式的字符串,例子如下:

a[data-info|=name] {
    color: red;
}

它将匹配如下示例:

<a data-info="name-address-phone">Info</a>

<a data-info="address-name-phone">Info</a>

<a data-info="address-phone-name">Info</a>

性能问题

以上所有这些复杂的属性选择器都须通过一遍又一遍的计算来匹配对应属性值,从而确保最终的显示效果正确。为此,CSS需要开销更多的时间,来计算整个页面的显示效果。

规则说明与示例

规则 ID:regex-selectors

此规则意在标识出存在影响性能问题的潜在选择器。为此,规则在发现选择器使用 *=,|=,^=,$=,~=提示警告。

以下示例提示警告:

.mybox[class~=xxx]{
    color: red;
}

.mybox[class^=xxx]{
    color: red;
}

.mybox[class|=xxx]{
    color: red;
}

.mybox[class$=xxx]{
    color: red;
}

.mybox[class*=xxx]{
    color: red;
}

以下示例不会提示警告:

.mybox[class=xxx]{
    color: red;
}

.mybox[class]{
    color: red;
}

shorthand

要求简写属性 Require shorthand properties

有时咱们编写一条规则时,使用简写来代替多属性定义会更好,例如:

.mybox {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

此四属性可以组合成一个margin属性,如下:

.mybox {
    margin: 20px 10px 30px;
}

使用简写属性可以帮助减少CSS体积的大小。

规则说明与示例

规则 ID: shorthand

此规则意在检索出可简写的属性来减少文件体积。因此,在如下示例中提示警告:

当margin-left,margin-right,margin-top,margin-bottom在同一规则中使用时。
当padding-left,padding-right,padding-top,padding-bottom在同一规则中使用的。

以下示例提示警告:

.mybox {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.mybox {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 30px;
}

以下示例不提示警告:

/* only two margin properties*/
.mybox {
    margin-left: 10px;
    margin-right: 10px;

}

/* only two padding properties */
.mybox {
    padding-right: 10px;
    padding-top: 20px;
}

star-property-hack

不允许星号前缀 Disallow star hack

星号前缀是有名(也可能无名)的技巧，仅用来在IE8以前的版本上指定CSS属性。通过在属性名前加上星号，老版IE游览器解析时，将当此星号不存在，而其它游览器则直接忽略此属性。例子如下:

.mybox {
    border: 1px solid black;
    padding: 5px;
    width: 100px;
    *width: 200px;
}

在此示例中，IE7及更早版本会将*width属性当作width解析，因此实际值为200px；其它游览器则忽略跳过此属性，使用的实际值为100px。

星号前缀是依赖老版IE的CSS解析器缺陷，也因此，并不建议使用它。

规则说明与示例

规则 ID: star-property-hack

此规则意在消除在CSS中使用星号前缀.因此,在发现属性名前使用星号时提示警告。

以下示例提示警告:

.mybox {
    border: 1px solid black;
    *width: 100px;
}

text-indent

不允许文本负缩进 Disallow negative text indent

文本负缩进通常当作辅助的目的，来隐藏在屏幕上的文字。使用场景之一就是作为图像替换技术，使用文本负缩进，可确保屏幕阅读器在文本没有显示在屏幕中时也能读取其数据。使用visibility:hidden或display:none会使得屏幕阅读器略过文本信息，因此，运用文本负缩进被视为更好的辅助处理方式。

此技巧通常使用很大的负单位数值，如-999px或-9999px，如下:

.mybox {
    background: url(bg.png) no-repeat;
    text-indent: -9999px;
}

此带有技巧性的缩进允许背景图片展示给普通游览用户的同时，也确保了屏幕阅读器能顺利解析内联的文本信息。

当文本负缩进使用在横向视图页面时，会引起一定的麻烦，因为会出现一个很长的横向滚动条。此问题可以通过添加direction:ltr来解决，如下:

.mybox {
    background: url(bg.png) no-repeat;
    direction: ltr;
    text-indent: -9999px;
}

关于文本负缩进是否会影响页面搜索排名，出现了各种不同的声音。 Anecdotal accounts 觉得Google会把文本负缩进当作垃圾广告技术来处理，但是这并未得到验证。

规则说明与示例

规则 ID: text-indent

此规则意在找出CSS代码中使用text-indent的潜在问题。警告出现在 text-indent的值为-99或类似(如，-100，-999)，而没有使用direction:ltr时。数值的单位不会考虑在其中，因为px，em或其它单位会看作等同。

以下示例提示警告:

/* missing direction */
.mybox {
    text-indent: -999px;
}

/* missing direction */
.mybox {
    text-indent: -999em;
}

/* direction is rtl */
.mybox {
    direction: rtl;
    text-indent: -999em;
}

以下示例不会提示警告:

/* direction used */
.mybox {
    direction: ltr;
    text-indent: -999em;
}

/* Not obviously used to hide text */
.mybox {
    text-indent: -1em;
}

underscore-property-hack

不允许下划线前缀 Disallow underscore hack

下划线前缀是仅对IE7以前版本的游览器执行CSS属性的一种技术手段。通过在属性名前添加下划线，老版IE游览器将省略下划线，而其它游览器则直接忽略此属性。示例如下:

.mybox {
    border: 1px solid black;
    padding: 5px;
    width: 100px;
    _width: 200px;
}

在这个例子中，IE6及以前游览器把_width属性当width看待，所以实际宽度为200px;其它游览器则跳过此属性，因而实际值为100px。

下划线前缀是依赖IE游览器，CSS解析的缺陷实现其效果，正因如此，非特殊情况并不推荐使用。

规则说明与示例

规则 ID: underscore-property-hack

此规则意在消除在CSS中使用下划线前缀。因此，在属性名前出现下划线将提示警告:

.mybox {
    border: 1px solid black;
    _width: 100px;
}

unique-headings

标题应只定义一次 Headings should only be defined once

面相对象CSS (OOCSS) 要求定义可重用的对象，以确保在站点的任何位置使用时，都有着相同的显示效果。标题元素 (h1 - h6) 应当作为内建对象考虑，使其不管在何处使用均为同样的显示效果。因此，每个标题元素，因当只被规则定义一次。多处规则定义相同的标题显示效果，会使其很难使用，因为标题样式会因为上下文环境不一致而出现不同展示效果。

规则说明与示例

规则 ID:unique-headings

此规则意在标识出重复定义标题元素的声明。因此，警告出现在对同一标题定义了多个规则时。

以下示例提示警告:

/* Two rules for h3 */
h3 {
    font-weight: normal;
}

.box h3 {
    font-weight: bold;
}

以下示例不提示警告:

/* :hover doesn't count */
h3 {
    font-weight: normal;
}

h3:hover {
    font-weight: bold;
}

universal-selector

不允许通用选择器 Disallow universal selector

通用选择器 (*) 匹配所有元素。尽管每次都能很方便的选择一组元素，但如果将其作为选择器的核心部分(选择器位置的最右侧) 则会造成性能问题。举个例子，如下的规则形式应该避免使用:

.mybox * {
    background: #fff;
    color: #000;
    background: rgba(255， 255， 255， 0.5);
}

游览器按照从右至左的顺序解析选择器，因此这个规则将首先匹配文档中的所有元素。然后，逐一检测这些元素是否匹配下级规则，即是否拥有祖先样式mybox。如果包涵 * 的选择器越复杂，其解析的时间越久。正是因为此原因，推荐在使用通用选择器时，避免将其放置选择器的最右侧。

规则说明与示例

规则 ID: universal-selector

此规则意在标示出因为使用通用选择器而引起缓慢的样式规则。因此，在发现通用选择器出现在选择器的最右侧时提示警告。

以下示例提示警告:

* {
    color: red;
}

.selected * {
    color: red;
}

以下示例不提示警告:

/* universal selector is not key */
.selected * a {
    color: red;
}

unqualified-attributes

不允许未定义的属性选择器 Disallow unqualified attribute selectors

未定义属性选择器，如 [type=text]，首先匹配所有元素，然后检查各属性。这意味着未定义选择器和通用选择器(*)一样都有着相同性能特点。和通用选择器相似，未定义属性选择器作为选择器的核心部分(选择器最右侧)时，会造成性能问题。举个例子，如下规则定义应当避免使用:

.mybox [type=text] {
    background: #fff;
    color: #000;
    background: rgba(255， 255， 255， 0.5);
}

游览器以从右至左的方式解析选择器，因而，此规则首先匹配文档中的所有元素，然后逐一检查对应属性。之后，再检查这些元素是否匹配下一级条件，即是否有祖先样式类 mybox。包涵未定义属性选择器的规则越复杂，判断的时间开销越久。正因如此，在使用未定义属性选择器时，应避免将其放置最右侧。

规则说明与示例

规则 ID: unqualified-attributes

此规则意在标示出因使用未定义属性选择器而造成解析缓慢的规则。因此，在未定义属性选择器出现在规则最右侧时，提示警告。

以下示例提示警告:

[type=text] {
    color: red;
}

.selected [type=text] {
    color: red;
}

以下示例不提示警告:

/* unqualified attribute selector is not key */
.selected [type=text] a {
    color: red;
}

vendor-prefix

要求游览器前缀属性与标准属性组合使用 Require standard property with vendor prefix

游览器前缀属性是各游览器提供商在标准样式还未建成时，提供实验性新增CSS功能，而创建的。其允许开发者和游览器提供商在之后新增属性还未确定定稿时，发现潜在的缺陷和跨游览器兼容性问题。标准版属性通常(但也不总是)与游览器前缀版，有着相同的名字和语构，如果有两种或以上相同的游览器前缀属性语构相似，则标准版属性与其语构保持一致。

当使用游览器前缀属性如-moz-border-radius，你应当同时编写标准属性，以保障今后的兼容性。标准属性编写应在游览器前缀属性之后，以确保标准属性能被游览器识别使用到，如下:

.mybox {
    -moz-border-radius: 5px;
    border-radius: 5px;
}

将标准属性放置游览器前缀属性之后是确保一旦标准属性完全实行时，你的CSS代码能正常运转的最好方式(接着，你就可找个喝茶的时间，把以往的游览器前缀属性给删除)。

规则说明与示例

规则 ID: vendor-prefix

此规则意在确保不论何时使用游览器前缀属性时，与其匹配的标准属性均同时编码。因此，规则在以下条件时，提示警告:

游览器前缀属性之后，没有跟随与其匹配的标准属性。
与游览器前缀属性匹配的标准属性，出现在前缀属性之前。

以下示例提示警告:

/* missing standard property */
.mybox {
    -moz-border-radius: 5px;
}

/* standard property should come after vendor-prefixed property */
.mybox {
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

以下示例不提示警告:

/* both vendor-prefix and standard property */
.mybox {
    -moz-border-radius: 5px;
    border-radius: 5px;
}

zero-units

不允许零值有单位 Disallow units for zero values

在任何场景下，不论是长度单位还是百分比，使用 0 值而不指定单位，都是允许且正常运行的。在 0px，0em，0%，或其它 0值单位之间，均无任何差别。单位在这里并不重要，因为值本身都会是零。CSS允许咱们省略零值的单位，并依旧视为合法的CSS。

推荐移除所有长度为零后面的单位;因为在游览器中规定的单位并不会起效，所以在安心移除的同时，还减小了文件体积。

规则说明与示例

规则 ID: zero-units

此规则意在标示出长度为零且带有单位的情形。因此，在发现 0 后跟随了单位或百分比时，提示警告。

以下示例提示警告:

.mybox {
    margin: 0px;
}

.mybox {
    width: 0%;
}

.mybox {
    padding: 10px 0px;
}

以下示例不提示警告:

.mybox {
    margin: 0;
}

.mybox {
    padding: 10px 0;
}

csslint 语法建议规则

adjoining-classes

不允许使用相邻类 Disallow adjoining classes

规则说明与示例

box-model

注意盒子模型 Beware of box model size

规则说明与示例

box-sizing

不允许使用 盒子大小 Disallow box sizing

规则说明与示例

bulletproof-font-face

预防字体引用错误 Bulletproof font face

规则说明与示例

compatible-vendor-prefixes

使用游览器前缀 Require compatible vendor prefixes

规则说明与示例

empty-rules

不允许空规则 Disallow empty rules

规则说明与示例

display-property-grouping

给display设置匹配的组合属性 Require properties appropriate for display

规则说明与示例

duplicate-background-images

不允许重复背景图片 Disallow duplicate background images

规则说明与示例

duplicate-properties

不允许重复属性 Disallow duplicate properties

规则说明与示例

fallback-colors

要求备用色彩 Require fallback colors

规则说明与示例

floats

不允许过多的浮动 Disallow too many floats

规则说明与示例

font-faces

不使用过多网络字体 Don't use too many web fonts

font-sizes

不使用过多的字体大小声明 Don't use too many font size declarations

规则说明与示例

gradients

要求定义所有渐变前缀 Require all gradient definitions

规则说明与示例

ids

不允许 ID 选择器 Disallow IDs in selectors

规则说明与示例

import

不允许 使用@import Disallow @import

规则说明与示例

important

不允许 使用 !important Disallow !important

规则说明与示例

known-properties

要求使用已知属性 Require use of known properties

规则说明与示例

outline-none

不允许 outline:none Disallow outline:none

规则说明与示例

overqualified-elements

不允许 过度定义选择器 Disallow overqualified elements

规则说明与示例

qualified-headings

不允许 定义标题 Disallow qualified headings

规则说明与示例

regex-selectors

不允许 选择器类似与表达式 Disallow selectors that look like regular expressions

规则说明与示例

shorthand

要求简写属性 Require shorthand properties

规则说明与示例

star-property-hack

不允许 星号前缀 Disallow star hack

规则说明与示例

text-indent

不允许 文本负缩进 Disallow negative text indent

规则说明与示例

underscore-property-hack

不允许 下划线前缀 Disallow underscore hack

规则说明与示例

unique-headings

标题应只定义一次 Headings should only be defined once

不允许使用盒子大小 Disallow box sizing

不允许使用@import Disallow @import

不允许使用 !important Disallow !important

不允许过度定义选择器 Disallow overqualified elements

不允许定义标题 Disallow qualified headings

不允许选择器类似与表达式 Disallow selectors that look like regular expressions

不允许星号前缀 Disallow star hack

不允许文本负缩进 Disallow negative text indent

不允许下划线前缀 Disallow underscore hack

不允许通用选择器 Disallow universal selector

不允许未定义的属性选择器 Disallow unqualified attribute selectors

要求游览器前缀属性与标准属性组合使用 Require standard property with vendor prefix

不允许零值有单位 Disallow units for zero values